<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>一润魔方</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/media-100.css"/>
		<script src="js/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/three.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body {
				background: #13152a;
				font-size: 14px;
			}
			.con3{
				margin-top: 0.6rem;
				background: #1a1e37;
			}
			.con3 ul{
				padding: 0.25rem 0;
				display: -webkit-flex; /* Safari */
			  	display: flex;
			  	flex-direction:row;
			  	flex-wrap:wrap;
			  	justify-content:space-between;
			  	border-bottom: 2px solid #484c62;
			}
			.con3 ul ul{
				width: 100%;
				padding: 0.25rem 0 0;
				display: -webkit-flex; /* Safari */
			  	display: flex;
			  	flex-direction:row;
			  	flex-wrap:wrap;
			  	justify-content:space-between;
			  	border-bottom: none;
			}
			.con3 ul ul.third li{
				width: 33.3%;
			}
			.con3 li{
				float: left;
				color: #fff;
				text-align: center;
				width: 23%;
			}
			.con3 li.last{
				width: 8%;
			}
			.con3 li span{
				font-size: 0.24rem;
			}
			.con3 li p{
				font-size: 0.28rem;
				margin-top: 0.15rem;
			}
			.con3 li img{
				width: 0.24rem;
			}
			.hidden{
				display: none;
			}
			.user_info h2{
				text-align: center;
				color: #566bfe;
				font-size: 0.3rem;
				margin-top: 0.3rem;
			}
			.user_info ul{
				border-bottom: none;
			}
			.user_info li{
				float: none;
				width: 100%;
				text-align: left;
				padding-left: 0.9rem;
				font-size: 0.22rem;
				line-height: 2;
			}
		</style>
	</head>

	<body>
		<div id="chart" style="width: 100%;height: 5rem"></div>
		<script type="text/template" class="summaryTpl">
			{@each datas as it}
			<ul>
				<li>
					<span>客户</span>
					<p>${it.enterpriseName}</p>
				</li>
				<li>
					<span>授信额度</span>
					<p>${it.creditLine/10000}</p>
				</li>
				<li>
					<span>可用额度</span>
					<p>${((it.creditLine*1 - it.creditLineAlready*1)/10000).toFixed(2)}</p>
				</li>
				<li>
					<span>融资金额</span>
					<p>${it.creditLineAlready/10000}</p>
				</li>
				<li class="last">
					<img src="img/up.png" />
				</li>
				<div class="hidden">
					<ul>
						<li>
							<span>贷款累计发放</span>
							<p>${it.financeAmount/10000}</p>
						</li>
						<li>
							<span>累计还款</span>
							<p>${it.totalRepayAmount/10000}</p>
						</li>
						<li>
							<span>敞口金额</span>
							<p>${it.creditLineAlready/10000}</p>
						</li>
						<li>
							<span>额度有效期</span>
							<p>${it.effectiveDays}</p>
						</li>
						<li class="last">
						</li>
					</ul>
					<ul class="third">
						<li>
							<span>额度起始时间</span>
							<p>${(it.effectiveStart).substr(0, 10)}</p>
						</li>
						<li>
							<span>额度截止时间</span>
							<p>${(it.effectiveEnd).substr(0, 10)}</p>
						</li>
						<li>
							<span>核准利率及质押率</span>
							<p>{@each it.financeBulkstockPledgeRateList as item} ${item.bulkstockName} 【${item.loanRateCeiling}%/${item.pledgeRateCeiling}%】<br/> {@/each}</p>
						</li>
					</ul>
				</div>
			</ul>
			{@/each}
		</script>
		
		<div class="con3 summaryBody">
			<div class="div1"></div>
			<div class="div2">
				<div class="user_info">
					<h2>客户信息</h2>
					<ul>
						<li>客户信息：<span class="data" name="enterpriseName"></span></li>
						<li>客户代码：<span class="data" name="enterpriseCode"></li>
						<li>客户类别：<span class="data" name="enterpriseType"></span></li>
						<li>直属关系：<span class="data" name="belongsEnterprise"></span></li>
						<li>所属区域：<span class="data" name=""></span></li>
					</ul>
				</div>
				<div class="user_info">
					<h2>详细信息</h2>
					<ul>
						<li>法人姓名：<span class="data" name="legalPerson"></span></li>
						<li>身份证号码：<span class="data" name="legalIdcard"></span></li>
						<li>手机号码：<span class="data" name="mobile"></span></li>
						<li>联系地址：<span class="data" name="contactAddress"></span></li>
						<li>客户经理：<span class="data" name="clientManager"></span></li>
					</ul>
				</div>
				<div class="user_info">
					<h2>额度信息</h2>
					<ul>
						<li>信用额度：<span class="data" name="creditLine"></span></li>
						<li>使用额度：<span class="data" name="creditAlready"></span></li>
						<li>可用额度：<span class="data" name="creditLineRemain"></span></li>
						<li>额度使用率：<span class="data" name="creditLineRate"></span>%</li>
						<li>额度起始时间：<span class="data" name="effectiveStartDate"></span></li>
						<li>额度起始时间：<span class="data" name="effectiveEndDate"></span></li>
					</ul>
				</div>
			</div>
		</div>
	</body>
	<script src="../../../../component/layer/layer.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="../../../../js/seajs/sea.js"></script>
	<script type="text/javascript" src="../../../../js/seajs/seajs-text.js"></script>
	<script type="text/javascript" src="../../../../js/seajs/seajs-css.js"></script>
	<script type="text/javascript" src="../../../../js/bord/config.js"></script>
	<script type="text/javascript" src="../../../../js/juicer-min.js"></script>
	<script type="text/javascript">
		seajs.use('./three', function(three) {
			three.init();
		});
	</script>
	
</html>